const path = require('path')
const pxtorem = require('postcss-pxtorem');
const CracoLessPlugin = require('craco-less');
const { log } = require('console');
const lessModuleRegex = /\.module\.less$/;
const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  style: {
    postcss: {
      mode: "extends",
      loaderOptions: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            pxtorem({
              rootValue: 37.5,
              propWhiteList: [],
              minPixelValue: 2,
              exclude: /node_modules/i
            }),
          ],
        },
      },
    },
  },
  webpack: {
    alias: {
      '@': pathResolve('src')
    }
  },
  //   babel: {
  //     plugins: [
  //       ['import', { libraryName: 'antd', style: true }],
  //       ['@babel/plugin-proposal-decorators', { legacy: true }]
  //     ]
  //   },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {

        // less loader options
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true,
          },
        },

        // A callback function that receives two arguments: the webpack rule, 
        // and the context. You must return an updated rule object.
        modifyLessRule: (lessRule, context) => {
          lessRule.test = lessModuleRegex;
          lessRule.exclude = /node_modules|antd\.css/;
          return lessRule;
        },

        // Passing an options object to configure the css-loaders
        cssLoaderOptions: {
          modules: { localIdentName: "[local]_[hash:base64:5]" },
        },

      },
    },
  ]
}